<template>
  <div class="wrap">
    <div class="wrap-month">
      <a-card
        :tab-list="tabListNoTitle"
        :active-tab-key="noTitleKey"
        @tabChange="(key) => onTabChange(key, 'noTitleKey')"
      >
        <div slot="tabBarExtraContent">
          <!-- <a-range-picker :style="{ width: '256px' }" /> -->
          <!-- <a-range-picker
            :placeholder="['Start month', 'End month']"
            format="YYYY-MM"
            :value="value"
            :mode="mode2"
            @panelChange="handlePanelChange2"
            @change="handleChange"
          /> -->
        </div>
        <div v-if="noTitleKey === 'T1'">
          <a-row :gutter="24">
            <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
              <h4 :style="{ marginBottom: '20px' }">接收处置趋势</h4>
              <month />
            </a-col>
            <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
              <h4 :style="{ marginBottom: '20px' }">企业申报Top10</h4>
              <top10 />
            </a-col>
          </a-row>
        </div>
        <p v-else-if="noTitleKey === 'T2'">app content</p>
      </a-card>
    </div>
    <!-- <div style="margin-bottom：24px"> -->
    <a-row :gutter="24">
      <a-col :xs="24" :sm="12">
        <a-card title="危废类别占比">
          <div slot="extra" style="height: inherit">
            <!-- <div class="analysis-salesTypeRadio">
                  <a-radio-group defaultValue="a">
                    <a-radio-button value="a">{{
                      $t("dashboard.analysis.channel.all")
                    }}</a-radio-button>
                    <a-radio-button value="b">{{
                      $t("dashboard.analysis.channel.online")
                    }}</a-radio-button>
                    <a-radio-button value="c">{{
                      $t("dashboard.analysis.channel.stores")
                    }}</a-radio-button>
                  </a-radio-group>
                </div> -->
          </div>
          <v2 />
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="12">
        <!-- <a-card title="仓库饱和度">
            <div slot="extra" style="height: inherit">
              <div class="analysis-salesTypeRadio">
                  <a-radio-group defaultValue="a">
                    <a-radio-button value="a">{{
                      $t("dashboard.analysis.channel.all")
                    }}</a-radio-button>
                    <a-radio-button value="b">{{
                      $t("dashboard.analysis.channel.online")
                    }}</a-radio-button>
                    <a-radio-button value="c">{{
                      $t("dashboard.analysis.channel.stores")
                    }}</a-radio-button>
                  </a-radio-group>
                </div>
            </div>
            <v2 />
          </a-card> -->
      </a-col>
    </a-row>
    <!-- </div> -->
  </div>
</template>

<script>
import month from "./modules/month";
import v1 from "./modules/wasteType/v1";
import v2 from "./modules/wasteType/v2";
import top10 from "./modules/top10";

export default {
  name: "Workplace",
  components: {
    month,
    v1,
    v2,
    top10,
  },
  data() {
    return {
      tabListNoTitle: [
        {
          key: "T1",
          tab: "处置额",
        },
        // {
        //   key: "T2",
        //   tab: "排行榜",
        // },
      ],
      key: "T1",
      noTitleKey: "T1",
      loading: false,
      radarLoading: false,
      activities: [],
      teams: [],
    };
  },
  computed: {},
  created() {},
  mounted() {
    // this.initRadar();
  },
  methods: {
    onTabChange(key, type) {
      console.log(key, type);
      this[type] = key;
    },
    initRadar() {
      this.radarLoading = true;

      this.radarLoading = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  height: 100%;
  padding: 24px;
  .wrap-month {
    padding-bottom: 24px;
  }
}
</style>
